<template>
  <div>
    <el-container>
      <!--      <el-aside width="5%"></el-aside>-->
      <el-main class="register-main"
               style="margin-bottom: 10px;width: 400px;height:100%;vertical-align: center">
        <h1 style="color: #409EFF;text-align: center">添加摄像头信息</h1>

        <el-form :model="camera" label-width="20%">
          <el-form-item label="IP">
            <el-input v-model="camera.ip" type="text" autocomplete="off" placeholder="请输入摄像头的ip地址" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="Port" required>
            <el-input v-model="camera.port" type="text" autocomplete="off" placeholder="请输入摄像头的端口号" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="类型" required>
            <el-select v-model="type" placeholder="请选择摄像头类型" style="width: 90%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" required>
            <el-input v-model="camera.name" type="tel" autocomplete="off" placeholder="请输入摄像头的名称" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>

          <el-form-item label-width="0">
            <el-button type="primary" @click="add()" style="margin-left: 40%;width:100px">添加</el-button>
            <div class="clearBox"></div>
          </el-form-item>
        </el-form>
      </el-main>
      <!--      <el-aside width="5%"></el-aside>-->
    </el-container>
  </div>
</template>

<script>
export default {
  name: "AddCamera",
  data() {
    return {
      camera: {
        ip:"",
        port:"",
        type:"",
        name:"",
      },
      type:"",
      options: [{
        value: '选项1',
        label: 'null'
      }, {
        value: '选项2',
        label: 'stranger',
      }, {
        value: '选项3',
        label: 'expression',
      }, {
        value: '选项4',
        label: 'volunteer',
      }, {
        value: '选项5',
        label: 'faceDetection',
      }, {
        value: '选项6',
        label: 'faceCognitive',
      }, {
        value: '选项7',
        label: 'expressionEXStranger',
      }, {
        value: '选项8',
        label: 'fall',
      }, {
        value: '选项9',
        label: 'faceCollection',
      }],
    }
  },
  watch: {
    type(newName){
      if(newName == "选项1"){
        this.camera.type = "null";
      }
      else if(newName == "选项2") {
        this.camera.type = "stranger";
        //print(111);
      }
      else if(newName == "选项3") {
        this.camera.type = "expression";
      }
      else if(newName == "选项4") {
        this.camera.type = "volunteer";
      }
      else if(newName == "选项5") {
        this.camera.type = "faceDetection";
      }
      else if(newName == "选项6") {
        this.camera.type = "faceCognitive";
      }
      else if(newName == "选项7") {
        this.camera.type = "expressionEXStranger";
      }
      else if(newName == "选项8") {
        this.camera.type = "fall";
      }
      else if(newName == "选项9") {
        this.camera.type = "faceCollection";
      }
    }
  },
  created() {
    if (this.$route.params.isReload == 'true') {
      this.$router.go(0);
    }
  },
  methods: {
    add: function(){
      const _this = this;
      this.$axios.post('/addCamera', {
            "ip":_this.camera.ip,
            "port":_this.camera.port,
            "type":_this.camera.type,
            "name":_this.camera.name
          },
          {
            headers: {
              "Content-Type": "application/json;charset=utf-8"
            },
            withCredentials: true
          }
      ).then(function (response) {

        // 这里是处理正确的回调
        if (response.data.code == '0') {
          _this.$message({
            message: '添加成功！',
            type: 'success'
          });
          _this.$router.go(0);
        } else {
          _this.$message.error(response.data.msg);
        }
      }).catch(function (response) {
        // 这里是处理错误的回调
        console.log(response)
      });
    },
    handleClose(done) {
      done();
    }
  }

}
</script>

<style scoped>

</style>
